<div class="cil__base-block">
  <img class="cil__top-image" src="assets/images/centaur/change.svg" />
  <form class="cil__base-block--form" [formGroup]="validateForm" nz-form>
    <app-detail-header [title]="'BIZ.MERCHANT.OTHER.TRADE.AUTH_CODE' | i18n" [hideIcon]="true"></app-detail-header>
    <div nz-row [nzGutter]="24">
      <div nz-col [nzSpan]="12">
        <nz-form-item>
          <nz-form-label>{{'BIZ.MERCHANT.OTHER.TRADE.NEW_AUTH_CODE' | i18n}}</nz-form-label>
          <nz-form-control>
            <input nz-input formControlName="authPassword"  />
            <nz-form-explain *ngIf="validateForm.get('authPassword').dirty">
              <ng-container *ngTemplateOutlet="errorTpl;context:{control:validateForm.get('authPassword'), name:'authPassword'}"></ng-container>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>

      <div nz-col [nzSpan]="12">
        <nz-form-label>{{'BIZ.MERCHANT.OTHER.TRADE.NEW_AUTH_CODE_CONFIRM' | i18n}}</nz-form-label>
        <nz-form-control>
          <input nz-input formControlName="authPasswordCF" />
          <nz-form-explain *ngIf="validateForm.get('authPasswordCF').dirty && validateForm.get('authPasswordCF').errors">
            <ng-container>{{'BIZ.MERCHANT.OTHER.TRADE.AUTH_CODE_NOT_MATCH' | i18n}}</ng-container>
          </nz-form-explain>
        </nz-form-control>
      </div>
    </div>
  </form>
</div>

<ng-template #errorTpl let-control="control" let-name="name">
  <ng-container *ngIf="control.dirty">
    <ng-container *ngIf="control.hasError('required'); else second">{{ errorTips[name]?.required }}</ng-container>
    <ng-template #second>
      <ng-container *ngIf="control.hasError('maxlength'); else third">{{ errorTips[name]?.maxlength }}</ng-container>
    </ng-template>
    <ng-template #third>
      <ng-container *ngIf="control.hasError('minlength'); else fourth">{{ errorTips[name]?.minlength }}</ng-container>
    </ng-template>
    <ng-template #fourth>
      <ng-container *ngIf="control.hasError('pattern')">{{ errorTips[name]?.pattern }}</ng-container>
    </ng-template>
  </ng-container>
</ng-template>